<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增订单详细</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 300px; margin: 50px auto; }
        .form-group { margin-bottom: 10px; }
        label { display: block; margin-bottom: 5px; }
        input, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 20px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px; }
    </style>
</head>
<body>
<div class="container">
    <h2>新增订单详细</h2>
    <form id="addOrderDetailForm">
        <div class="form-group">
            <label for="actionType">操作类型:</label>
            <select id="actionType" name="actionType" required>
                <option value="new">新建订单</option>
                <option value="existing">在原有订单上添加</option>
            </select>
        </div>
        <div class="form-group" id="orderIDGroup" style="display: none;">
            <label for="orderDetailOrderID">订单 ID:</label>
            <select id="orderDetailOrderID" name="orderDetailOrderID" required>
                <!-- 订单ID选项在这里动态生成 -->
            </select>
        </div>
        <div class="form-group" id="productIDGroup">
            <label for="orderDetailProductID">产品 ID:</label>
            <select id="orderDetailProductID" name="orderDetailProductID" required>
                <!-- 产品ID选项在这里动态生成 -->
            </select>
        </div>
        <div class="form-group">
            <label for="orderDetailQuantity">数量:</label>
            <input type="number" id="orderDetailQuantity" name="orderDetailQuantity" required>
        </div>
        <div class="form-group">
            <label for="orderDetailUnitPrice">单价:</label>
            <input type="text" id="orderDetailUnitPrice" name="orderDetailUnitPrice" readonly>
        </div>
        <div class="form-group">
            <button type="button" onclick="createOrderDetail()">创建订单详细</button>
            <button type="button" onclick="window.history.back()">取消</button>
        </div>
    </form>
</div>

<script>
    // 初始化页面时，根据操作类型显示或隐藏订单ID输入框
    document.getElementById('actionType').addEventListener('change', function(e) {
        var orderIDGroup = document.getElementById('orderIDGroup');
        if (e.target.value === 'new') {
            orderIDGroup.style.display = 'none';
        } else if (e.target.value === 'existing') {
            orderIDGroup.style.display = 'block';
            fetchOrderIDs();
        }
    });

    // 页面加载时获取产品ID并填充到下拉框中
    window.onload = function() {
        fetchProducts();
    };

    // 获取产品列表并填充到下拉框中
    function fetchProducts() {
        fetch('/api/products')
            .then(response => response.json())
            .then(data => {
                const productSelect = document.getElementById('orderDetailProductID');
                data.forEach(product => {
                    const option = document.createElement('option');
                    option.value = product.productID; // 使用 productID 作为 option 的值
                    option.text = product.name;
                    productSelect.appendChild(option);
                });
                productSelect.onchange = function() {
                    fetchProductPrice(productSelect.value); // 当选择产品时，获取并填充单价
                };
            })
            .catch(error => {
                console.error('Error:', error);
                alert('获取产品列表失败: ' + error.message);
            });
    }

    // 获取订单ID列表并填充到下拉框中
    function fetchOrderIDs() {
        fetch('/api/orders')
            .then(response => response.json())
            .then(data => {
                const orderSelect = document.getElementById('orderDetailOrderID');
                orderSelect.innerHTML = ''; // 清空下拉框
                data.forEach(order => {
                    const option = document.createElement('option');
                    option.value = order.orderID; // 使用 orderID 作为 option 的值
                    option.text = order.orderID;
                    orderSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error:', error);
                alert('获取订单列表失败: ' + error.message);
            });
    }

    // 根据产品ID获取产品价格并填充到单价输入框中
    function fetchProductPrice(productID) {
        fetch(`/api/products/${productID}`)
            .then(response => response.json())
            .then(data => {
                const unitPriceInput = document.getElementById('orderDetailUnitPrice');
                unitPriceInput.value = data.price; // 使用 data.price 作为单价
            })
            .catch(error => {
                console.error('Error:', error);
                alert('获取产品价格失败: ' + error.message);
            });
    }

    // 获取当前最大的订单ID
    function getMaxOrderID(callback) {
        fetch('/api/max-order-id')
            .then(response => response.json())
            .then(data => {
                if (callback) {
                    callback(data + 1); // 调用回调函数，并传递自增后的订单ID
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('获取最大订单ID失败: ' + error.message);
            });
    }

    // 创建订单详细函数
    function createOrderDetail() {
        const actionType = document.getElementById('actionType').value;
        let orderID = '';
        if (actionType === 'existing') {
            orderID = document.getElementById('orderDetailOrderID').value;
        } else if (actionType === 'new') {
            getMaxOrderID(function(newOrderID) {
                orderID = newOrderID; // 使用自增后的订单ID
                performCreateOrderDetail(); // 执行创建订单详情的操作
            });
            return; // 先不提交表单，等获取到ID后再提交
        }

        const productID = document.getElementById('orderDetailProductID').value;
        const quantity = document.getElementById('orderDetailQuantity').value;
        const unitPrice = document.getElementById('orderDetailUnitPrice').value;

        // 确保订单 ID 和产品 ID 是数字类型
        const parsedOrderID = parseInt(orderID);
        const parsedProductID = parseInt(productID);

        // 检查订单 ID 和产品 ID 是否为有效数字
        if ((actionType === 'existing' && isNaN(parsedOrderID)) || isNaN(parsedProductID)) {
            alert('订单 ID 和产品 ID 必须是有效的数字');
            return;
        }

        fetch('/api/orderdetails', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                orderId: parsedOrderID, // 对于新订单，不发送 orderID
                productId: parsedProductID,
                quantity: parseInt(quantity),
                unitPrice: parseFloat(unitPrice)
            }),
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                alert('订单详细创建成功');
                window.history.back();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('订单详细创建失败: ' + error.message);
            });
    }

    // 执行创建订单详情的操作
    function performCreateOrderDetail() {
        const actionType = document.getElementById('actionType').value;
        const orderID = actionType === 'existing' ? document.getElementById('orderDetailOrderID').value : '';
        const productID = document.getElementById('orderDetailProductID').value;
        const quantity = document.getElementById('orderDetailQuantity').value;
        const unitPrice = document.getElementById('orderDetailUnitPrice').value;

        // 确保订单 ID 和产品 ID 是数字类型
        const parsedOrderID = parseInt(orderID);
        const parsedProductID = parseInt(productID);

        // 检查订单 ID 和产品 ID 是否为有效数字
        if ((actionType === 'existing' && isNaN(parsedOrderID)) || isNaN(parsedProductID)) {
            alert('订单 ID 和产品 ID 必须是有效的数字');
            return;
        }

        fetch('/api/orderdetails', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                orderId: parsedOrderID, // 对于新订单，不发送 orderID
                productId: parsedProductID,
                quantity: parseInt(quantity),
                unitPrice: parseFloat(unitPrice)
            }),
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                alert('订单详细创建成功');
                window.history.back();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('订单详细创建失败: ' + error.message);
            });
    }
</script>
</body>
</html>